<!DOCTYPE html>
<html lang="zh-Hans">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>成语接龙</title>
        <link rel="shortcut icon" href="favicon.png" type="image/png" />
        <link rel="stylesheet" href="css/single.css" />
        <!--
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        -->
    </head>
    <body>
        <div class="display" id="game">
            <div class="bar-box">
                <div class="bar" :style="{width: 100*time/setTime +'%'}"></div>
            </div>
            <div class="word">
                <div class="pair" v-for="pair in pairs" :key="pair.char">
                    <div class="pinyin">{{pair.pinyin}}</div>
                    <div class="character">{{pair.char}}</div>
                </div>
            </div>
            <div class="explanation">{{explanation}}</div>
            <form class="answer" onsubmit="vm.check(); return false;" v-show="run">
                <div class="score">{{score}}</div>
                <input
                    class="input"
                    id="input"
                    type="text"
                    v-model.trim="input"
                    tabindex="1"
                    autofocus
                    autocomplete="off"
                />
                <button class="submit">
                    <img src="img/submit.svg" alt="好" />
                </button>
            </form>
            <div class="pasts">
                <div class="past" v-for="aPast in past">{{aPast}}</div>
            </div>
        </div>
        <!--
        <script src="js/jquery-3.5.1.slim.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        -->
        <script src="js/vue.min.js"></script>
        <script src="js/single.js"></script>
        <!--
        <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <script src="js/wx.js"></script>
        -->
    </body>
</html>
